<template>
  <Tabbar />
  <view class=" absolute w-full h-[80vh] flex justify-between items-center  mt-15">
    <view class="w-[78vw] h-[78vh]">
      <swiper class="w-[78vw] h-[78vh]" @change="changeSwiper">
        <swiper-item>
          <view class="w-[78vw] h-[78vh] absolute top-0 left-0 flex justify-center items-center z-10"
            @click="goPage('/pages/index/company')">
            <view
              class="text-black font-bold text-lg  absolute bottom-120 left-[44%] flex justify-center items-center text-center z-10 w-[200rpx] h-[100rpx]  bg-[#eeeeee] opacity-80 rounded-full"
              v-show="noShowButton">点击查看</view>
          </view>
          <image :src="companyData.home.swiperData[0].image" mode="aspectFill" class="w-[78vw] h-[78vh]" />
        </swiper-item>
        <swiper-item @click="doPlaying()" class="w-[78vw] h-[78vh]">
          <view class="w-[78vw] h-[65vh] absolute top-30 left-0 flex justify-center items-center z-10">
          </view>
          <image :src="companyData.home.videoPoster" mode="aspectFill"
            class="w-[78vw] h-[78vh] absolute top-0 left-0 flex justify-center items-center z-10" v-show="showPoster" />
          <view
            class="text-white font-bold text-lg absolute bottom-120 left-[44%] flex justify-center items-center text-center  z-10 w-[200rpx] h-[100rpx]  bg-[#7B7D81] opacity-80 rounded-full"
            v-show="noShowButton">点击播放</view>
          <DomVideoPlayer ref="domVideoPlayer" :src="companyData.home.swiperData[1].image" :controls="true"
            :enable-progress-gesture="false" class="w-full h-auto">
          </DomVideoPlayer>
        </swiper-item>
      </swiper>
    </view>
    <view class="w-[42vw] h-[78vh] p-2 flex flex-col justify-start items-start">
      <text class="w-full text-3xl text-center">公司概述</text>
      <view class="">
        <text v-for="item in companyData.home.companyDescriptionFull" class="text-16px">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item }}<br />
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onPageScroll, onReachBottom, onShow, onHide } from '@dcloudio/uni-app'
import Tabbar from '@/components/Tabbar/tabbar.vue'
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
import { companyData } from './data'
// import { fs } from '../data'

/**
 * @desc 监测swipe页码变化的方法
 */
function change(e: any) {
}


const changeSwiper = (e: any) => {
  doPause()
}

const domVideoPlayer = ref<any>(null)
const noShowButton = ref(true)
const showPoster = ref(1)
const doPlaying = () => {
  showPoster.value = 0
  if (domVideoPlayer.value.playing) {
    doPause()
  } else {
    doPlay()
  }
}
const doPlay = () => {
  domVideoPlayer.value.play()
  noShowButton.value = false
}

const doPause = () => {
  domVideoPlayer.value.pause()
  noShowButton.value = true
}

const goPage = (url: string) => {
  uni.navigateTo({
    url
  })
}

onHide(() => {
  showPoster.value = 1
  noShowButton.value = true
})



onMounted(() => {
})
</script>

<style scoped>
.box-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
}

.period-b {
  background-color: #ECF5FF;
  color: #1684FC;
}

.period-n {
  background-color: #F6F6F6;
  color: #B0B7C2;
}
</style>
